import React, { FC, useState, useEffect } from 'react';
import styles from './artist.less';
import banner from '@/assets/img/bg_singer.jpg';
import SearchBar from './searchBar/searchBar';
import { Row, Col, Divider, Spin } from 'antd';
import { connect, ConnectProps, history, ArtistModelState } from 'umi';

interface PageProps extends ConnectProps {
  artistModel: ArtistModelState;
  dispatch: any;
}

const Artist: FC<PageProps> = (props: any) => {
  let { artistModel } = props;
  const [initial, setInitial] = useState(
    props.location.query.initial
      ? { value: props.location.query.initial }
      : { label: '热门', value: '-1' },
  );
  const [area, setArea] = useState(
    props.location.query.initial
      ? { value: props.location.query.area }
      : { label: '全部",value', value: '-1' },
  );
  const [type, setType] = useState(
    props.location.query.initial
      ? { value: props.location.query.type }
      : { label: '全部",value', value: '-1' },
  );
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    history.push({
      pathname: '/artist',
      query: {
        initial: initial.value,
        area: area.value,
        type: type.value,
      },
    });
    dataSource();
  }, [initial, area, type]);

  let dataSource = () => {
    setLoading(true);
    props
      .dispatch({
        type: 'artistModel/getArtistList',
        payload: {
          initial: initial,
          area: area,
          type: type,
        },
      })
      .finally(() => {
        setLoading(false);
      });
  };

  let setCat = (data: any) => {
    console.log(data);
    if (data.type == 'initial') {
      setInitial({ label: data.label, value: data.value });
    } else if (data.type == 'area') {
      setArea({ label: data.label, value: data.value });
    } else {
      setType({ label: data.label, value: data.value });
    }
  };

  return (
    <div>
      <div
        className={styles.banner}
        style={{ backgroundImage: 'url(' + banner + ')' }}
      >
        <h2 className={styles.bannerTitle}>万千歌手，尽在眼前</h2>
      </div>
      <div className={styles.content}>
        <SearchBar
          selectedInitial={initial}
          selectedArea={area}
          selectedType={type}
          setCat={setCat}
        ></SearchBar>
        <br />
        <Spin spinning={loading} delay={500}>
          <Row gutter={16}>
            {artistModel.artistList.map((data: any, index: number) => (
              <Col span={4} key={index}>
                <div className={styles.artistImgItem}>
                  <img className={styles.pic} src={data.picUrl} />
                  <p className={styles.name}>{data.name}</p>
                </div>
              </Col>
            ))}
          </Row>
        </Spin>
      </div>
    </div>
  );
};

export default connect(
  ({ artistModel }: { artistModel: ArtistModelState }) => ({ artistModel }),
)(Artist);
